import React, { useState, useRef } from 'react'
import axios from 'axios'
import { Image, List, InfiniteScroll } from 'antd-mobile'

export default function NowPlaying(props) {
    const [list, setList] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const count = useRef(0)

    const loadMore = () => {
        count.current++
        setHasMore(false)
        axios({
            url: `https://m.maizuo.com/gateway?cityId=110100&pageNum=${count.current}&pageSize=10&type=1&k=1886067`,
            headers: {
                'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16812175742925156196417537", "bc": "110100" }',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then(res => {
            setList([...list, ...res.data.data.films])
            setHasMore(res.data.data.films.length > 0)
        })
    }

    return (
        <div>
            <List>
                {list.map(item => (
                    <List.Item
                        onClick={() => {
                            props.history.push(`/detail/${item.filmId}`)
                        }}
                        arrow={true}
                        key={item.filmId}
                        prefix={
                            <Image
                                src={item.poster}
                                width={80}
                            />
                        }
                        description={
                            <div>{item.nation} | {item.runtime}分钟</div>
                        }
                    >
                        <div>{item.name}</div>
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>
    )
}
